<template>
    <div class="container" ref="containerRef">
        <div class="navbar">
            <div class="move"></div>
            <el-button type="danger" style="width: 20px;height: 20px;" :icon="CloseBold" @click="close" circle />
        </div>
        <div id="aplayer"></div>
    </div>
</template>

<script setup>
import {CloseBold} from '@element-plus/icons-vue'
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import { ref, onMounted, onUnmounted } from "vue";

const containerRef = ref()

// 歌曲列表
const audio = ref([]);
// 其他配置信息
const info = ref({
    fixed: false, // 不开启吸底模式
    autoplay: true, // 开启自动播放
    preload: "auto", // 自动预加载歌曲
    loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
    order: "list", //  播放模式，list列表播放, random随机播放
    lrcType: 0, //使用js字符串格式加载歌词
    listFolded: true, // 默认展开列表
});

const initAudio = () => {
    console.log('audio.value',audio.value);
    // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
    const ap = new APlayer({
        container: document.getElementById("aplayer"),
        audio: audio.value.map(song => {
            return {
                ...song,
                url: `data:audio/mpeg;base64,${song.url}`
            }
        })
        ,
        ...info.value, // 其他配置信息
    });
    // 监听列表展开
    ap.on("listshow", () => {
        console.log("列表展开");
        window.electron.ipcRenderer.send('openList', JSON.stringify([]));
    })
    ap.on("listhide", () => {
        console.log("列表收起");
        window.electron.ipcRenderer.send('closeList', JSON.stringify([]));

    })
};
onMounted(() => {
    // 初始化播放器
    window.electron.ipcRenderer.send('getMusic', JSON.stringify([]));
    window.electron.ipcRenderer.on('returnMusic', (event, data) => {
        audio.value = JSON.parse(data)
        initAudio();
    })
});
onUnmounted(() => {
    window.electron.ipcRenderer.removeAllListeners('updateMusic',JSON.stringify([]));
});

const close = () => {
    window.electron.ipcRenderer.send('closeMusicPlayer');
}
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 100vw;
    height: 100vh;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    // border: 1px solid #333;
    color: #333;
    opacity: 0.9;
    -webkit-app-region: no-drag;
}
#aplayer{
    width: 100%;
    position: absolute;
    top: 0;
}
.navbar{
    width: 100%;
    display: flex;
    text-align: end;
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 999;
    .move{
        flex: 1;
        -webkit-app-region: drag;
        cursor: move;
    }
}
</style>